<template>
  <el-dialog :title="title" :visible="showDialog" width="50%" @open="onOpen" @close="onClose">
    <!-- 权限的树形结构 -->
    <!-- :data 指定数据源 -->
    <!-- :props 配置项 -->
    <!-- default-expand-all 默认展开所有节点 -->
    <!-- show-checkbox 展示左侧的复选框 -->
    <!-- check-strictly 父子节点不互相关联 -->
    <!-- :default-checked-keys 用来指定哪些节点默认被选中 -->
    <!-- node-key 用来指定，通过哪个属性来控制节点是否被选中 -->
    <el-tree
      ref="treeRef"
      v-loading="isloading"
      :data="treeData"
      :props="treeProp"
      :default-checked-keys="defaultKeys"
      node-key="id"
      default-expand-all
      show-checkbox
      check-strictly
    ></el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="onClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 按需导入接口
import { getAllPerAPI } from '@/api/permission.js'
import { arr2Tree } from '@/utils'
import { getRoleAPI, assignPerAPI } from '@/api/role.js'

export default {
  name: 'AssignPer',
  props: {
    // 外界传递过来的属性，用来控制对话框的显示和隐藏
    showDialog: {
      type: Boolean,
      default: false
    },
    // 接收到的角色的 id
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 权限的树形结构数据
      treeData: [],
      treeProp: {
        label: 'name'
      },
      // 默认被勾选的节点的数组，值是默认选中项的 id 值
      defaultKeys: [],
      isloading: false,
      // 角色的名字
      roleName: ''
    }
  },
  computed: {
    title() {
      return `为"${this.roleName}"分配权限`
    }
  },
  methods: {
    async onOpen() {
      // // 1. 获取所有权限的数据
      // const result = await getAllPerAPI()
      // this.treeData = arr2Tree(result.data, '0')
      // // 2. 根据 id 查询角色下的权限
      // const res = await getRoleAPI(this.id)
      // this.defaultKeys = res.data.permIds

      this.isloading = true
      try {
        const arr = [getAllPerAPI(), getRoleAPI(this.id)]
        const [result, res] = await Promise.all(arr)

        // 赋值
        this.treeData = arr2Tree(result.data, '0')
        this.defaultKeys = res.data.permIds
        this.roleName = res.data.name
      } finally {
        this.isloading = false
      }
    },
    onClose() {
      this.$emit('update:showDialog', false)
      this.$emit('update:id', '')
      // 对话框关闭的时候，把已勾选的数组重置为空数组
      this.defaultKeys = []
      // 对话框关闭的时候，把树里面已勾选的节点清空
      this.$refs.treeRef.setCheckedKeys([])
      this.roleName = ''
    },
    async onConfirm() {
      // 注意：data 里面的 this.defaultKeys 只是初始值，修改的结果不会在 this.defaultKeys 中体现出来
      // 要想拿最新的勾选结果，需要通过 el-tree 的 getCheckedKeys 方法来获取
      const checkedKeys = this.$refs.treeRef.getCheckedKeys()
      await assignPerAPI({ id: this.id, permIds: checkedKeys })
      this.$message.success('分配权限成功！')
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped></style>
